<template>
  <div>
    <el-card class="box-card">
      <!-- Page Header -->
      <div style="padding-bottom: 20px">
        <el-page-header :icon="ArrowLeft" @back="backToProblem">
          <template #content>
            <div class="flex items-center">
              <span class="text-large font-600 mr-3">{{ problemTitle }}</span>
              <el-tag :style="{ backgroundColor: '#f5f5f5', color: difficultyColor, marginLeft: '5px' }">
                {{ difficultyText }}
              </el-tag>
            </div>
          </template>
        </el-page-header>
      </div>

      <!-- Result Card -->
      <el-card shadow="never">
        <el-result
            :icon="resultIcon"
            :title="submissionDetails.data.statue"
            :sub-title="resultTitle"
        ></el-result>
      </el-card>

      <!-- Basic Information Descriptions -->
      <div  v-if="submissionDetails.code === 200">
        <el-descriptions border title="基本信息">
          <el-descriptions-item label="结果">
            <el-tag :type="resultTagType">{{ submissionDetails.data.statue }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="提交者昵称">{{ submissionDetails.data.nikeName }}</el-descriptions-item>
          <el-descriptions-item label="账号">{{ submissionDetails.data.username }}</el-descriptions-item>
          <el-descriptions-item label="提交时间">{{ submissionDetails.data.submitTime }}</el-descriptions-item>
          <el-descriptions-item label="代码语言">{{ submissionDetails.data.language }}</el-descriptions-item>
          <el-descriptions-item label="代码长度">{{ submissionDetails.data.code.length }}</el-descriptions-item>
          <el-descriptions-item label="执行时间">{{ submissionDetails.data.time }}</el-descriptions-item>
          <el-descriptions-item label="运行时间">{{ submissionDetails.data.runTime }}</el-descriptions-item>
          <el-descriptions-item label="内存使用">{{ submissionDetails.data.memory }}</el-descriptions-item>
        </el-descriptions>
        <div style="padding-top: 2vh"/>
        <el-row :gutter="20">
          <el-col :span="12"><div class="grid-content ep-bg-purple"  /><Statistics :runTime="submissionDetails.data.runTime" :memory="submissionDetails.data.memory" :ProblemId="submissionDetails.data.problemId" /></el-col>
          <el-col :span="12"><div class="grid-content ep-bg-purple" /><Rank :problemId="submissionDetails.data.problemId"/></el-col>
        </el-row>
      </div>
      <!-- Error Details for non-200 status codes -->
      <div v-else>
        <el-descriptions style="padding-top: 3vh" border title="错误信息">
          <el-descriptions-item label="最后输入">{{ submissionDetails.data.input }}</el-descriptions-item>
          <el-descriptions-item label="标准输出">{{ submissionDetails.data.taOutput }}</el-descriptions-item>
          <el-descriptions-item label="用户输出">{{ submissionDetails.data.saOutput }}</el-descriptions-item>
        </el-descriptions>
      </div>

      <!-- Code Display Section -->
      <div style="padding-top: 3vh">
        <el-card shadow="never">
          <el-divider/>
          <pre><code :class="'language-' + getLanguageClass(submissionDetails.data.language)">{{ submissionDetails.data.code.trim() }}</code></pre>
          <el-divider/>
        </el-card>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import {ref, computed, onMounted, nextTick, watch} from 'vue';
import { useStore } from 'vuex';
import { ArrowLeft } from "@element-plus/icons-vue";
import {useRoute} from "vue-router";
import router from "@/router";
import hljs from 'highlight.js';
import 'highlight.js/styles/default.css';
import Rank from "./Rank.vue"
import Statistics from "./Statistics.vue";

const store = useStore();
const route = useRoute();

const result = computed(() => store.state.results[route.params.id]);
const submissionDetails = computed(() => result.value.resultData);
const problemDetailsData = computed(() => result.value.problemDetails);

const problemTitle = computed(() => {
  return problemDetailsData.value ? `${problemDetailsData.value.codeId}.${problemDetailsData.value.title}` : '';
});

const difficultyText = computed(() => problemDetailsData.value ? problemDetailsData.value.difficultyName : '未知');
const difficultyColor = computed(() => {
  switch (difficultyText.value) {
    case '简单':
      return '#1cb8b8'; // 绿色
    case '中等':
      return '#e6a23c'; // 黄色
    case '困难':
      return '#f56c6c'; // 红色
    default:
      return '#f5f5f5'; // 默认灰色
  }
});

const resultIcon = computed(() => {
  const status = submissionDetails.value.data.statue;
  if (status === 'Accepted') return 'success';
  if (status === 'Wrong Answer') return 'error';
  return 'warning';
});

const resultTitle = computed(() => {
  const status = submissionDetails.value.data.statue;
  return status === 'Accepted' ? '代码提交通过' : '检查你的代码';
});
const resultTagType = computed(() => {
  switch (submissionDetails.value.data.statue) {
    case 'Accepted':
      return 'success';
    case 'Wrong Answer':
      return 'danger';
    default:
      return 'warning';  // 对于其他未明确指定的结果类型
  }
});

const getLanguageClass = (language) => {
  switch(language) {
    case 'C++':
      return 'cpp';
    case 'JavaScript':
      return 'javascript';
    case 'Python':
      return 'python';
    default:
      return 'plaintext'; // 默认为纯文本
  }
};

const backToProblem = () => {
  router.push(`/Commit/${problemDetailsData.value.id}`);
};

onMounted(() => {
  nextTick(() => {
    hljs.highlightAll();
  });
});

watch(() => submissionDetails.value?.data?.code, () => {
  nextTick(() => {
    hljs.highlightAll();
  });
}, { immediate: true });
</script>



<style scoped>
pre, code {
  margin: 0;
  padding: 0;
  white-space: pre-wrap; /* Maintains whitespace formatting within `pre` tags */
  background: none; /* Removes any background styling */
  border: none; /* Removes any borders */
}

.box-card {
  margin-top: 2.5vh;
}

.icon {
  width: 20px;
  height: 20px;
  margin-right: 4px;
}

.text-large {
  font-size: 24px;
}

.font-600 {
  font-weight: 600;
}
</style>

